<h3>描述</h3>
<p>表格复选 + 分页</p>
<p>1. 表格复选功能需要配合tiCheckgroup组件来实现，具体可参考tiCheckgroup组件的使用说明。</p>
<p>2. 按UI规范，全选复选框控制选中/取消选中当前页。</p>
<p>3. 某页选中一些行，跳转到其他页，再次返回到之前页，之前选中的行仍然是选中的。</p>
<h3>导入</h3>
<span>import {{ '{' }} TiTableModule, TiCheckboxModule, TiOverflowModule {{ '}' }} from '@opentiny/ng';</span>
<h3>示例</h3>

<h4>1.复选 + 前台分页</h4>
<br />
<button type="button" (click)="show = !show">显示/隐藏选中项数据 checkedList</button>
<div *ngIf="show">checkedList：{{checkedList|json}}</div>
<ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
  <table>
    <thead>
      <tr>
        <!--使用复选框时，需要给复选框列加 checkbox-column 属性-->
        <th checkbox-column>
          <!--全选按钮，控制选中/取消选中当前页， items 传入displayed-->
          <input type="checkbox" tiCheckgroup [items]="displayed" [(checkeds)]="checkedList" />
        </th>
        <th tiOverflow>{{columns[1].title}}</th>
        <th tiOverflow>{{columns[2].title}}</th>
        <th tiOverflow>{{columns[3].title}}</th>
        <th tiOverflow>{{columns[4].title}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of displayed;index as i;trackBy: trackByFn" [ngClass]="{'ti3-selected-tr': checkedList.indexOf(row) !== -1}">
        <!--使用复选框时，需要给复选框列加 checkbox-column 属性-->
        <!--点击checkbox所在的单元格可以选中或者取消选中
                    并且可以使用ti3-disabled-cell样式为复选框所在的单元格添加禁用样式-->
        <td checkbox-column [ngClass]="{'ti3-disabled-cell': row.disabled}">
          <input type="checkbox" tiCheckitem [item]="row" [disabled]="row.disabled" />
        </td>
        <td tiOverflow>{{row.lastName}}</td>
        <td tiOverflow>{{row.age}}</td>
        <td tiOverflow>{{row.balance | currency}}</td>
        <td tiOverflow>{{row.email}}</td>
      </tr>
    </tbody>
  </table>
  <ti-pagination [(currentPage)]="currentPage" [pageSize]="pageSize" [(totalNumber)]="totalNumber"> </ti-pagination>
</ti-table>
<br />
<h4>2.复选 + 后台分页</h4>
<br />
<p>注意 tiCheckgroup 上 valueKey 接口的使用</p>
<button type="button" (click)="show1 = !show1">显示/隐藏选中项数据 checkedList1</button>
<div *ngIf="show1">checkedList1：{{checkedList1 | json}}</div>
<br />
<ti-table [(displayedData)]="displayed1" [srcData]="srcData1" [columns]="columns1" (stateUpdate)="stateUpdate($event)">
  <table>
    <thead>
      <tr>
        <!--使用复选框时，需要给复选框列加 checkbox-column 属性-->
        <th checkbox-column>
          <!--全选按钮-->
          <!--如果有分页，全选checkbox按UI规范应当控制的是当前页，items接口传入displayed-->
          <!--后台分页，为了翻页后，之前页的选中状态能够保持，需要使用 valueKey 接口来自定义选中值，valueKey指定的属性值必须是items中每条数据的唯一标识值-->
          <input type="checkbox" tiCheckgroup valueKey="id" [items]="displayed1" [(checkeds)]="checkedList1" />
        </th>
        <th tiOverflow>{{columns1[1].title}}</th>
        <th tiOverflow>{{columns1[2].title}}</th>
        <th tiOverflow>{{columns1[3].title}}</th>
        <th tiOverflow>{{columns1[4].title}}</th>
      </tr>
    </thead>
    <tbody>
      <!--为了更好的渲染性能，建议在ngFor数据时总是trackBy数据条目中的某个唯一属性值(如id)-->
      <tr *ngFor="let row of displayed1;index as i;trackBy: trackByFn" [ngClass]="{'ti3-selected-tr': checkedList1.indexOf(row) !== -1}">
        <!--使用复选框时，需要给复选框列加 checkbox-column 属性-->
        <!--点击checkbox所在的单元格可以选中或者取消选中
                    并且可以使用ti3-disabled-cell样式为复选框所在的单元格添加禁用样式-->
        <td checkbox-column [ngClass]="{'ti3-disabled-cell': row.disabled}">
          <input type="checkbox" tiCheckitem [item]="row" [disabled]="row.disabled" />
        </td>
        <td tiOverflow>{{row.lastName}}</td>
        <td tiOverflow>{{row.age}}</td>
        <td tiOverflow>{{row.balance | currency}}</td>
        <td tiOverflow>{{row.email}}</td>
      </tr>
    </tbody>
  </table>
  <ti-pagination [(currentPage)]="currentPage1" [pageSize]="pageSize1" [(totalNumber)]="totalNumber1"></ti-pagination>
</ti-table>
